<template>
<!-- vue动画 -->
    <div>
        <!-- <button @click="isShow = !isShow">显示/隐藏</button> 
        <h1 v-show="isShow" class="go">{{msg}}</h1>-->



        <button @click="isShow = !isShow">显示/隐藏</button>
        
        <transition appear name="limy">
            <h1  v-show="isShow" >{{msg}}</h1>
        </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg:'杨二皮',
            isShow:true,
        }
    },

}
</script>
<style >
    h1{
        background-color: aqua;
    }


    .come{
        animation: lining 1s;
    }
    .go{
        animation: lining 1s reverse;
    }


    .limy-enter-active{
        animation: lining 1s;
    }
    .limy-leave-active{
        animation: lining 1s reverse;
    }
    /* 动画关键帧 */
    @keyframes lining {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>